<template>
  <div>
    <div class="container" style="position: relative;">
      <div></div>
      <div style="display:inline-block;color:#409EFF;position: absolute;top:20px;left:19%;">检测管理</div>
      <div style="display:inline-block;color:#409EFF;position: absolute;top:20px;left:38%;">检测管理</div>
      <div style="display:inline-block;color:#409EFF;position: absolute;top:20px;left:57%;">检测管理</div>
      <el-steps :active="6" align-center  style="width:100%;margin-top:20px;">
        <el-step title="原料入库"></el-step>
        <el-step title="库存管理"></el-step>
        <el-step title="生产管理"></el-step>
        <el-step title="分装赋码"></el-step>
        <el-step title="外包管理"></el-step>
      </el-steps>
    </div>
    <el-row :gutter="20" class="listCard" style="margin-top: 20px;">
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>统计概况</span>
            <router-link to=""><el-button style="float: right; padding: 3px 0" type="text">更多</el-button></router-link>
          </div>
          <el-row class="demo-color-box">
            <el-col :span="8">
              <img width="40" src="../../assets/img/home-icon01.png" />
            </el-col>
            <el-col :span="14">
              成品实际产量
              <p>{{statisics.manufacture}}</p>
            </el-col>
          </el-row>
          <el-row class="demo-color-box">
            <el-col :span="8">
              <img width="40" src="../../assets/img/home-icon02.png" />
            </el-col>
            <el-col :span="14">
              赋码数量
              <p>{{statisics.print}}</p>
            </el-col>
          </el-row>
          <el-row class="demo-color-box">
            <el-col :span="8">
              <img width="40" src="../../assets/img/home-icon03.png" />
            </el-col>
            <el-col :span="14">
              扫码数量
              <p>{{statisics.scan}}</p>
            </el-col>
          </el-row>
          <el-row class="demo-color-box">
            <el-col :span="8">
              <img width="40" src="../../assets/img/home-icon04.png" />
            </el-col>
            <el-col :span="14">
              员工数量
              <p>{{statisics.user}}</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>消息中心</span>
            <router-link to="/message"><el-button style="float: right; padding: 3px 0" type="text">更多</el-button></router-link>
          </div>
          <div v-for="(o,index) in messageList" :key="index" class="text item">
            <span style="height: 30px; overflow:hidden; width:75%; display:inline-block;">{{o.content}}</span>
            <font>{{sub(o.createTime)}}</font>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="listCard">
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>扫码统计</span>
            <router-link to=""><el-button style="float: right; padding: 3px 0" type="text">更多</el-button></router-link>
          </div>
          <div style="height: 220px">
            <code-echarts></code-echarts>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>扫码来源</span>
            <router-link to=""><el-button style="float: right; padding: 3px 0" type="text">更多</el-button></router-link>
          </div>
          <div v-for="(o,index) in scanList" :key="index" class="text item">
            {{o.city}}
            <font>{{o.num}}</font>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="list">
      <el-col :span="12" v-show="show1">
        <el-card class="box-card noBoder">
          <div slot="header" class="clearfix">
            <span>原料入库概况</span>
            <router-link to="/materialCheck"><el-button style="float: right; padding: 3px 0" type="text">更多</el-button></router-link>
          </div>
          <div class="text item">
            <el-table
                :data="tableData"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
              <el-table-column prop="breedName" label="品名"></el-table-column>
              <el-table-column prop="inBatch" label="进场编号"></el-table-column>
              <el-table-column prop="inTime" label="入库时间"></el-table-column>
              <el-table-column prop="totalNum" label="入库数量">
                <template slot-scope="scope">
                  {{scope.row.totalNum}}{{scope.row.units}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" v-show="show2">
        <el-card class="box-card noBoder">
          <div slot="header" class="clearfix">
            <span>生产管理概况</span>
            <router-link to="/production"><el-button style="float: right; padding: 3px 0" type="text">更多</el-button></router-link>
          </div>
          <div class="text item">
            <el-table
                :data="tableData1"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
              <el-table-column prop="breedName" label="品名"></el-table-column>
              <el-table-column prop="batch" label="生产批次"></el-table-column>
              <el-table-column prop="time" label="生产日期"></el-table-column>
              <el-table-column prop="totalNumber" label="生产数量">
                <template slot-scope="scope">
                  {{scope.row.totalNumber}}{{scope.row.units}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" v-show="show3">
        <el-card class="box-card noBoder">
          <div slot="header" class="clearfix">
            <span>检测管理概况</span>
            <router-link to="/detection"><el-button style="float: right; padding: 3px 0" type="text">更多</el-button></router-link>
          </div>
          <div class="text item">
            <el-table
                :data="tableData2"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
              <el-table-column prop="breedName" label="检品名称"></el-table-column>
              <el-table-column prop="batch" label="检品批次"></el-table-column>
              <el-table-column prop="type" label="入库类型"></el-table-column>
              <el-table-column prop="isCheck" label="状态">
                <template slot-scope="scope">
                  {{scope.row.isCheck == 0?'未检测':'已检测'}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" v-show="show4">
        <el-card class="box-card noBoder">
          <div slot="header" class="clearfix">
            <span>颗粒包装管理概况</span>
            <router-link to="/packing"><el-button style="float: right; padding: 3px 0" type="text">更多</el-button></router-link>
          </div>
          <div class="text item">
            <el-table
                :data="tableData3"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
              <el-table-column prop="breedName" label="品名"></el-table-column>
              <el-table-column prop="batch" label="生产批号"></el-table-column>
              <el-table-column prop="time" label="生产日期"></el-table-column>
              <el-table-column prop="totalNumber" label="实际产量">
                <template slot-scope="scope">
                  <span v-if="scope.row.totalNumber == ''"></span>
                  <span v-else>
                                        {{scope.row.totalNumber}}{{scope.row.units}}
                                    </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" v-show="show5">
        <el-card class="box-card noBoder">
          <div slot="header" class="clearfix">
            <span>分包管理概况</span>
            <router-link to="/subpackage"><el-button style="float: right; padding: 3px 0" type="text">更多</el-button></router-link>
          </div>
          <div class="text item">
            <el-table
                :data="tableData4"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
              <el-table-column prop="breedName" label="品名"></el-table-column>
              <el-table-column prop="batch" label="生产批号"></el-table-column>
              <el-table-column prop="scUseNum" label="投料量">
                <template slot-scope="scope">
                  {{scope.row.scUseNum}}{{scope.row.scUseNumUnits}}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                  {{scope.row.status == 0?'未分包':'已分包'}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" v-show="show6">
        <el-card class="box-card noBoder">
          <div slot="header" class="clearfix">
            <span>审核管理概况</span>
            <router-link to="/examine"><el-button style="float: right; padding: 3px 0" type="text">更多</el-button></router-link>
          </div>
          <div class="text item">
            <el-table
                :data="tableData5"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
              <el-table-column prop="breedName" label="品名"></el-table-column>
              <el-table-column prop="printNum" label="分包数量">
                <template slot-scope="scope">
                  {{scope.row.printNum}}包
                </template>
              </el-table-column>
              <el-table-column prop="weight" label="每包计量">
                <template slot-scope="scope">
                  {{scope.row.weight}}{{scope.row.units}}
                </template>
              </el-table-column>
              <el-table-column prop="type" label="状态">
                <template slot-scope="scope">
                  {{scope.row.type == 0?'未审核' : scope.row.type == 1?'已通过':'已拒绝'}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" v-show="show7">
        <el-card class="box-card noBoder">
          <div slot="header" class="clearfix">
            <span>打印管理概况</span>
            <router-link to="/printTask"><el-button style="float: right; padding: 3px 0" type="text">更多</el-button></router-link>
          </div>
          <div class="text item">
            <el-table
                :data="tableData6"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
              <el-table-column prop="breedName" label="品名"></el-table-column>
              <el-table-column prop="printNum" label="分包数量">
                <template slot-scope="scope">
                  {{scope.row.printNum}}包
                </template>
              </el-table-column>
              <el-table-column prop="dispenserCode" label="发药机编码"></el-table-column>
              <el-table-column prop="type" label="状态">
                <template slot-scope="scope">
                  {{scope.row.type == 0?'未打印':'已打印'}}<span v-if="scope.row.type == 1">({{scope.row.lastPrintNum}})</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import codeEcharts from '../../components/common/codeEcharts.vue';
import {
  home_findByMaterial, // 原料入库
  home_findByManufacture, // 生产管理
  home_findByDetection, // 检测管理
  home_findByPack, // 颗粒包装 分包管理
  home_findByPrint, // 打印管理  审核管理
  home_statistics, //统计概况
  home_findByMessage, //消息中心
  home_scanSource, //扫码来源
} from "@/request/api";
export default {
  components: {
    codeEcharts
  },
  data() {
    return {
      statisics: {},
      messageList: [],
      scanList: [],
      permission: [],
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false,
      activeName: '1',
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      tableData6: [],
    };
  },
  computed: {},
  methods: {
    init(){
      // 原料入库
      home_findByMaterial('').then((res) =>{
        this.tableData = res.rows
      })
      // 生产管理
      home_findByManufacture('').then((res) =>{
        this.tableData1 = res.rows
      })
      // 检测管理
      home_findByDetection('').then((res) =>{
        this.tableData2 = res.rows
      })
      // 颗粒包装
      home_findByPack('').then((res) =>{
        this.tableData3 = res.rows
      })
      // 分包管理
      home_findByPack('').then((res) =>{
        this.tableData4 = res.rows
      })
      // 审核管理
      home_findByPrint('').then((res) =>{
        this.tableData5 = res.rows
      })
      // 打印管理
      home_findByPrint('').then((res) =>{
        this.tableData6 = res.rows
      })
      // 统计概况
      home_statistics('').then((res) =>{
        this.statisics = res.data
        if(this.statisics.print == null){
          this.statisics.print = 0
        }
      })
      //消息中心
      home_findByMessage('').then((res) =>{
        this.messageList = res.rows
      })
      //扫码来源
      home_scanSource('').then((res) =>{
        this.scanList = res.data
      })
    },
    sub(str){
      if(str){
        return str.substring(0,10);
      }
    },
  },
  mounted () {
    this.init();
    this.permission = JSON.stringify(this.$store.getters.permission)
    var name1 = '原料入库'
    var name2 = '生产管理'
    var name3 = '检测管理'
    var name4 = '颗粒包装'
    var name5 = '分包管理'
    var name6 = '审核管理'
    var name7 = '打印管理'
    if(this.permission.indexOf(name1) != -1){
      this.show1 = true
    }else{
      this.show1 = false
    }
    if(this.permission.indexOf(name2) != -1){
      this.show2 = true
    }else{
      this.show2 = false
    }
    if(this.permission.indexOf(name3) != -1){
      this.show3 = true
    }else{
      this.show3 = false
    }
    if(this.permission.indexOf(name4) != -1){
      this.show4 = true
    }else{
      this.show4 = false
    }
    if(this.permission.indexOf(name5) != -1){
      this.show5 = true
    }else{
      this.show5 = false
    }
    if(this.permission.indexOf(name6) != -1){
      this.show6 = true
    }else{
      this.show6 = false
    }
    if(this.permission.indexOf(name7) != -1){
      this.show7 = true
    }else{
      this.show7 = false
    }
  },
  watch:{
    // searchName: function (val, oldVal) {
    // }
  },
};
</script>


<style scoped lang="less">
.list .el-col{ margin-bottom: 20px; height: 346px;}
.list .el-col .el-card{ height: 100%;}
.noBoder .el-card__header{ border-bottom: 0; padding: 18px 20px 0px;}
.box-card .text{ line-height: 30px; font-size: 12px; position: relative;}
.box-card .item font{ position: absolute; right: 5px;}
.listCard .el-col{ margin-bottom: 20px; height: 250px;}
.listCard .el-col .el-card{ height: 100%;}
.demo-color-box{
  float: left;
  width: 33.33%;
  padding: 0 20px 20px;
  height: 90px;
  line-height: 24px;
  color: #fff;
  .el-col{
    height: 100%;
    color: #606266;
    font-size: 14px;
    p{
      color: #303133;
      font-weight: 600;
    }
  }
}
</style>
